<template>
  <a-modal
    width="680px"
    v-model="userInfoVisible"
    title="修改密码"
    ok-text="确认"
    cancel-text="关闭"
    @ok="hideModal"
  >
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="旧密码" required>
        <a-input v-model="form.name" type='password' />
      </a-form-model-item>
      <a-form-model-item label="新密码" required>
        <a-input v-model="form.name" type='password' />
      </a-form-model-item>
      <a-form-model-item label="确认密码" required>
        <a-input v-model="form.name" type='password' />
      </a-form-model-item>
     
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      userInfoVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span:18 },
      form: {
        name: '',
       
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    },
    showModal() {
      this.userInfoVisible = true
    },
    hideModal() {
      this.userInfoVisible = false
    }
  }
}
</script>
<style lang="less" scoped>

/deep/.ant-modal-footer {
  text-align: center;
}
</style>